<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        canvas{border: 1px solid red;}
    </style>
</head>
<body>
    <canvas id="box"width="500" height="500">你的浏览器不支持</canvas>
    <script>
        var box=document.getElementById("box");
        var pen=box.getContext("2d");
        pen.clearRect(0,0,box.width,box.height);
        pen.moveTo(100,30);
        pen.lineTo(200,30);
        pen.stroke();
        pen.beginPath();
        pen.moveTo(100,50);
        pen.lineTo(50,100);
        pen.lineTo(150,100);
        pen.closePath();
        pen.stroke();
        pen.beginPath();
        pen.rect(150,130,100,150);
        pen.closePath();
        pen.stroke();
        pen.beginPath();
        pen.fillStyle="red";
        pen.fillRect(100,300,100,150);
        pen.closePath();
        pen.beginPath();
        pen.fillStyle="yellow";
        pen.fill();
        pen.strokeRect(300,300,100,150);
        pen.closePath();
        pen.beginPath();
        pen.arc(400,100,50,0,Math.PI*2,true);
        pen.closePath();
        pen.stroke();
        pen.beginPath();
        pen.moveTo(119.221);
        pen.quadraticCurveTo(111,37,372,102);
        pen.stroke();
        pen.closePath();
    </script>
</body>
</html>